<template>
  <div class="container" style="text-align: left">
    <div class="media">
      <div class="media-left">
        <img class="media-object" src="../assets/ic_female_medical.png" alt="...">
      </div>
      <div class="media-body">
        <h5 class="media-heading">导诊医生</h5>
        <h5 class="well well-sm"><small>请描述您的性别年龄、症状、就诊经历，我将推荐优秀的医生为您解答，并保证您的隐私安全。</small></h5>
      </div>
    </div>
    <h6>&nbsp;</h6>
    <ul class="nav nav-list"><li class="divider"></li></ul>
    <div class="form-group">
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请在此描述（必填）"
        v-model="textarea">
      </el-input>
    </div>
    <div class="form-group">
      <el-row :gutter="20" class="bigTitle">
        <!--标题-->
        <el-col :span="2.5" class="detailTitle">
          <h5>添加图片</h5>
          <p class="help-block">您上传的附件仅对解答问题的医生可见！(图片大小不能超过1MB，必填)</p>
        </el-col>
      </el-row>
      <div style="display: block;width:300px;height:150px;overflow: hidden;" >
        <el-upload
          action="http://47.75.110.31:8080/upload/index"
          list-type="picture-card"
          :file-list="fileList"
          :auto-upload="false"
          :name="file"
          :on-change="changePict"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          multiple :before-remove="handlebeforeRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>
    <button type="submit" class="btn btn-success btn-lg btn-block" @click="savePhoto()">下一步</button>
  </div>
</template>

<script>
  export default {
    name: 'Sec',
    data() {
      return {
        textarea: '',
        imageUrl: '',
        uploadData: [
          {
            type: "add",
            result: ""
          }
        ],
        modal_loading: false,
        questionImageIsShow: false,
        formItem: {
          d_title: "",
          de_enclosure: "",
          d_content: "",
          d_create_user: "",
          d_id: ""
        },
        fc_path: "",
        ruleInline: {
          d_title: [
            {required: true, message: '标题不能为空', trigger: 'blur'},
          ]
        },
        value1: [],
        forumData: [],
      }
    },
    methods: {
      // 上传照片
      //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
      savePhoto() {
        var formdata = new FormData();
        for (let i = 0; i < this.imgmid.length; i++) {
          formdata.append("file", this.imgmid[i]);
        }
        let config = {headers: {'Content-Type': 'multipart/form-data'}};
        this.$ajax.post('http://47.75.110.31:8080/upload/index', formdata, config)
          .then(response => {
            //照片多的话，返回有点慢...
            this.pictureUrl = response.data;
            localStorage.setItem('pic', this.pictureUrl);
            localStorage.setItem("symptom", this.textarea);
            if ( this.textarea === '') {
              alert("请将信息填写完整")
            } else {
              this.$router.push('/Third');
            }
          });
      },
      changePict(file, fileList) {
        this.imgmid = [];
        for (let i = 0; i < fileList.length; i++) {
          this.imgmid.push(fileList[i].raw);
        }
      },
      //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。
      handleBeforeRemove(file, fileList) {
        this.index = fileList.indexOf(file);
      },
      //文件列表移除文件时的钩子
      handleRemove(file, fileList) {
        this.imgmid = [];
        localStorage.removeItem('pic');
        for (var i = 0; i < fileList.length; i++) {
          this.imgmid.push(fileList[i].raw);
        }
      },
      //点击文件列表中已上传的文件时的钩子
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogPhotoVisible = true;
      },
      //文件上传成功时的钩子
      handleSuccess(response, file, fileList) {
        for (var i = 0; i < fileList.length; i++) {
          console.log(fileList[i].response + ";");
        }
      },
      Getto() {
        localStorage.setItem("symptom", this.textarea);
        this.$router.push('/Third');
      },
    }
  }
</script>

<style scoped>
  img {
    margin: 10px;
    width: 100px;
    height: 100px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .uploadBox {
    width: 100px;
    height: 100px;
    line-height: 60px;
    border-radius: 4px;
    position: relative;
    /*box-shadow: 0 1px 1px rgba(0, 0, 0, .2);*/
  }

  .uploadIcon {
    line-height: 60px;

  }

  .uploadMainBox {
    float: left;
    margin-right: 10px;
  }
</style>
